<template>
    <a-modal
            :visible="registeredMemberVisible"
            title="注册会员"
            cancelText="取消"
            okText="注册"
            @cancel="cancelRegist"
            @ok="handleSubmit"
    >
             <span slot="tab">
                <a-icon type="sketch" />
                企业会员
             </span>
            <a-form :form="form">
                <a-form-item
                        :label-col="formItemLayout.labelCol"
                        :wrapper-col="formItemLayout.wrapperCol"
                        label=" 企业id"
                >
                    <a-input
                            v-decorator="[
                              'Businessid',
                              { rules: [{ required: true, message: '请输入企业id' }] },
                            ]"
                            placeholder="请输入企业id"
                    />
                </a-form-item>
                <a-form-item
                        :label-col="formItemLayout.labelCol"
                        :wrapper-col="formItemLayout.wrapperCol"
                        label="邀请码"
                >
                    <a-input
                            v-decorator="[
                    'invitationCode',
                        { rules: [{  required: true,message: '请输入您的企业邀请码' }] },
                        ]"
                            placeholder="请输入您的企业邀请码"
                    />
                </a-form-item>
            </a-form>
    </a-modal>
</template>

<script>
    import {mapActions, mapGetters, mapMutations} from "vuex";
    import moment from 'moment';
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 },
    };
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 8, offset: 4 },
    };

    export default {
        name: "registeredMember",
        props:['registeredMemberVisible'],
        data() {

            return {
                checkNick: false,
                formItemLayout,
                formTailLayout,
                //上面是两个表单要用的样式
                form: this.$form.createForm(this, { name: 'dynamic_rule' }),
                //日期选择器要用
                dateFormat: 'YYYY/MM/DD',

            };
        },
        computed: {
            ...mapGetters([
                'userId',
            ])
        },
        methods: {
            moment,
            ...mapActions([
                'registeredmember',

            ]),
            ...mapMutations([
                'set_registeredMemberVisible'
            ]),
            handleChange(e) {
                this.checkNick = e.target.checked;
                this.$nextTick(() => {
                    this.form.validateFields(['nickname'], { force: true });
                });
            },
            //下面两个按钮的点击动作
            handleSubmit(e) {

                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        const data = {
                            userVO:{
                                id: Number(this.userId)
                            },
                            entVO:{
                                id: this.form.getFieldValue('Businessid'),
                                inviteCode: this.form.getFieldValue('invitationCode'),
                            }
                        }
                        // this.set_addHotelParams(data)
                        //写一个 发送函数
                        this.registeredmember(data);
                        console.log('会员信息')
                        console.log(data)
                    }
                });
                this.set_registeredMemberVisible(false);
                //TODO 修改！点击注册的之后
                //上面是检查？？
                // this.set_registeredMemberVisible(false);
            },
            cancelRegist() {
                this.set_registeredMemberVisible(false);
            },
        },
    }
</script>

<style scoped>

</style>
